<template>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="nikename" style="width: 500px;margin: 10px auto;">
            <el-input type="text" v-model="ruleForm.nikename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" style="width: 500px;margin: 20px auto;">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <br>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "Login",
        data(){
            var validatenikename = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号'));
                } else {
                    if (this.ruleForm.nikename !== '') {
                        this.$refs.ruleForm.validateField('nikename');
                    }
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.password !== '') {
                        this.$refs.ruleForm.validateField('password');
                    }
                    callback();
                }
            };
            return{
                ruleForm:{
                    password:'',
                    nikename:'',
                },
                rules: {
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    nikename: [
                        {validator: validatenikename, trigger: 'blur'}
                    ],
                }
            }
        },
        methods:{
            submitForm(){
                this.$http.post("http://localhost:8888/login",this.ruleForm).then(resp=>{
                    if (resp.data.code===2000){

                        localStorage.setItem("token",resp.data.data);

                        this.$router.push("/teacher")
                    }else {
                        this.$message.error("账号或密码错误")
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>